/**
 * @class ExtGames.Stack
 * @param {Array} An ordered array of cards to initialise this stack with
 * Represents an ordered stack of cards
 */
ExtGames.Hand = function(config) {
  var config = config || {};
  
  this.addCard = function(card) {
    this.add(card);
  };
  
  this.removeCard = function() {
    return cards.pop();
  };

  this.handName = config.handName || 'My Hand';
  this.type = config.type;
  this.autoSort = true;
    
  ExtGames.Hand.superclass.constructor.call(this, config);
    
  this.addEvents(
    /**
     * @event carddropped
     * Fires when a card is dropped on this stack
     * @param {ExtGames.Stack} this The stack the card was dropped on
     * @param {ExtGames.Card} card The card that was dropped
     */
    'carddropped'
  );
  
  if (this.type == 0) {
	  this.on('render',      this.initializeDropTarget, this);
  }
  this.on('afterlayout', this.applyClasses,         this);
};

Ext.extend(ExtGames.Hand, ExtGames.CardHolder, {
	
	
	handName: null,
		
  /**
   * Returns true if the request drop is allowed
   * @param {ExtGames.Card} cardToDrop The card the user wishes to drop onto this stack
   * @return {Boolean} True if this drop is allowed
   */
  dropAllowed: function(cardToDrop) {	  
	  return true;
  },
  
  /**
   * Iterates over the cards in this stack, adding CSS classes accordingly.
   * Intended to be attached to the afterlayout event
   */
  applyClasses: function() {
	  	  
    this.items.each(function(c) {
    
    	c.removeClass('x-solitaire-card-top');
    	c.removeClass('x-solitaire-card-bottom');
    	c.removeClass('x-solitaire-unused-top');
    	c.removeClass('x-solitaire-unused-bottom');
    	
      if (c == this.items.items[this.items.length - 1]) {
        //top card in stack
        c.addClass('x-solitaire-card-right');
        c.removeClass('x-solitaire-card-left');
        //c.reveal();
      } else {
        c.addClass('x-solitaire-card-left');
        c.removeClass('x-solitaire-card-right');
      };
      
      if (this.type == 0) {
    	c.initializeDragSource();
      }
    }, this);
  },
  
  /**
   * Creates the markup to render this stack
   */
  onRender: function(ct, position) {
	 var label = this.handName;
	 if (label == null) {
		 label = "My Hand";
	 }
	  
    this.el = ct.createChild({
      cls: 'x-solitaire-hand-wrapper',
      children: [
		{
			cls: 'player-name',
			tag: 'h1',
			html: label
		},
        {
          cls:   'x-solitaire-hand'
         // style: 'background: url('+cardUrl+') no-repeat bottom right;'
        }
      ]
    });
    
    this.stackHolder = this.el.child('.x-solitaire-hand');
        
    ExtGames.Hand.superclass.onRender.apply(this, arguments);
  },

  getLayoutTarget: function(){
    return this.stackHolder;
  },
  
  /**
   * Sets up a drag zone to allow the top card of each stack to be draggable
   */
  
  reveal: function() {
	  for (var i = 0; i < this.items.items.length; i++) {
		  this.items.items[i].reveal();
	  }
  },
  
  getNumCards: function() {
	  if (this.items && this.items.items) {
		  return this.items.items.length;
	  }
	  return 0;
  },
  
  toObject: function() {
	  var o = [];
	  
	  if (this.items && this.items.items) {
		  for (var i = 0; i < this.items.items.length; i++) {
			  var c = this.items.items[i];
			  o[i] = c.toObject();
		  }
	  }
	  
	  return o;
  },
  
  setTurn: function() {
  	this.getEl().setStyle('color', 'red');
  },
  
  removeTurn: function() {
  	this.getEl().setStyle('color', 'black');
  },
  
  sortCards: function() {
  	if (this.autoSort != true) {
  		return;
  	}
  	
  	if (!this.items.items) {
  		return;
  	}
  	var items = this.items.items.slice(0);
  	items.sort(sortCards);
  	
  	while (this.items.items.length > 0) {
  		this.remove(this.items.items[0]);
  	}
  	
  	for (var i = 0; i < items.length; i++) {
  		this.add(items[i]);
  	}
  	
  	this.doLayout();
  },
  
  toggleAutoSort: function(state) {
  	if (state == true) {
  		this.autoSort = true;
  	}
  	else {
  		this.autoSort = false;
  	}
  },
  
  rearrange: function(card, e) {
  	  if (this.autoSort == true) {
  		return;
  	  }
	  var pixelOffset = 20;
	  
	  var x = e.getXY()[0];
	  var y = e.getXY()[1];
	  
	  var items = this.items.items;
	  for (var i = 0; i < items.length; i++) {
		  var newX = items[i].getEl().getXY()[0];
		  if ((x - newX) <= pixelOffset && (x - newX) >= 0) {
			  card.move(this, i);
			  return;
		  } 
	  }
	  card.move(this);
  }
  
  
});

Ext.reg('solitaire-hand', ExtGames.Hand);